import React, { Component } from 'react';
import { SearchBar, Tabs } from 'antd-mobile'
import { get_cate } from '../../utils/api'
class Goods extends Component {

    state = {
        goodlist: []
    }
    componentDidMount() {
        //接受路由参数
        if (this.props.location.state) {
            let { id } = this.props.location.state
            // console.log(this.props.location);
            get_cate({ id }).then((res) => {
                // console.log(res);
                this.setState({
                    goodlist: res.data.list
                }, () => {
                    console.log(id);
                })
            })
        }

    }
    toDetail(id) {
        //详情页
        // this.props.history.push('/detail/' + id)
        this.props.history.push({ pathname: '/detail', state: { id } });

    }

    render() {
        return (
            <div className='goods'>
                <div className="top">
                    <h2>全部商品</h2>
                    <SearchBar placeholder='请输入内容' />
                    <Tabs>
                        <Tabs.Tab title='综合' key='1' />
                        <Tabs.Tab title='销量' key='2' />
                        <Tabs.Tab title='新品' key='3' />
                        <Tabs.Tab title='价格' key='4' />
                        <Tabs.Tab title='筛选' key='5' />
                    </Tabs>
                </div>
                <div className="shoplist">
                    {

                        this.state.goodlist && this.state.goodlist.map((item, index) => {
                            return (
                                <div className="shop" key={index} onClick={() => { this.toDetail(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className='name'>{item.name}</div>
                                    <div className="oprice"><span>原价￥{item.salesPrice.value}</span></div>
                                    <div className="price">活动价￥<span>{item.salesPrice.value}</span></div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Goods;